<template>
	<scroll-view style="height:100vh" scroll-y="true">
		<form @submit="formSubmit">
			<view class="contanier">
				<view class="content-item">
					<text>品牌LOGO</text>
					<view class="headimg" @click="tailoring()">
						<image class="avatarimg" :src="mainlogo"></image>
						<text style="color: #afafaf;font-size: 32rpx;margin-left: 20rpx;">›</text>
					</view>
				</view>
				
				<view class="content-item">
					<text>品牌名称</text>
					<input :value="brandinfo.title" maxlength="8" name="title" type="text" style="text-align: right;font-size: 30rpx;" placeholder="请输入品牌名称" />
				</view>

				<view class="content-item">
					<view class="faiqi">
						<view>发起人信息</view>
						<text @click="drawtipeject('发起人信息','可添加公众号或微信号，添加后，参与者可以非常方便的添加你的微信号或公众号。')">?</text>
					</view>
					<view class="headimg" @click="gotopro">
						<input v-model="attention_text" disabled type="text" style="text-align: right;font-size: 30rpx;" />
						<text style="color: #afafaf;font-size: 32rpx;margin-left: 20rpx;">›</text>
					</view>
				</view>
			</view>

			<view class="intro">
				<view class="intro-title">品牌简介</view>
				<view class="intro-content">
					<input name="introduction" :value="brandinfo.introduction" type="text" style="height: 80rpx;text-align: left;font-size: 30rpx;width: 90%;"
					 maxlength="30" placeholder="请输入品牌的一句话简介" />
				</view>
			</view>

			<view class="intro">
				<view class="intro-title">品牌介绍</view>
				<view class="intros">
					<textarea :value="brandinfo.details" name="details" class="area" maxlength="-1" auto-height="true" :placeholder="normaltext"
					 placeholder-style="color:#cecece"></textarea>
				</view>

				<view class="groupimg">
					<uploadimgs :imgnum="imgnum" :imglist="imglist" ref="uploadimgs"></uploadimgs>
				</view>
			</view>
			<!-- 	<view @click="saveinfo">保存</view> -->
			<button class="save-button" form-type="submit">保存</button>
			<view style="height: 120rpx;"></view>
			<!--常见问题弹窗-->
			<alert :modeltitle="problemtitle" :visible="commonproblemshow">
				<view class="tipcontents">
					<text>{{commonproblem}}</text>
					<view class="openbutton" @click="closeproblem">我知道了</view>
				</view>
			</alert>
			<!--图片裁剪-->
			<yq-avatar @upload="doUpload" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx"></yq-avatar>
		</form>
	</scroll-view>
</template>

<script>
	/**
	 * 品牌主页添加
	 */
	export default {
		data() {
			return {
				faqireninfo: '',
				problemtitle: '',
				commonproblem: '',
				commonproblemshow: false,
				normaltext: '请输入品牌介绍',
				mainlogo: 'https://fission-com.oss-cn-beijing.aliyuncs.com/rg-static/image/202009/93743dcbff2e5b59f9acb0141d341e71.png',
				imgnum: 4,
				imglist: [],
        attention_text: '',
				brandinfo: {
					attention_text: '',
					contact_id: '',
					details: '', //品牌详情
					introduction: '', // 品牌简介
					title: '', //品牌标题
				},
				id: '',
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id; 
				this.getdetail(option.id);
			}
			uni.$on('getimageArr', (rets) => {
				this.imglist = rets;
			})
		},
		onShow() {
			let tmpcontactus = uni.getStorageSync('tmpcontactus');
      //选中联系人的临时内存
			if (tmpcontactus) {
				this.attention_text = tmpcontactus.attention_text;
				this.brandinfo.contact_id = tmpcontactus.id;
			}
		},

		methods: {
			//获取详情
			getdetail(id) {
				this.$HttRequest({
					url: '/brand/detail?id=' + id,
					param: '',
				}, 'GET', true).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.brandinfo = res.data;
            this.attention_text = res.data.contact.attention_text;
						this.brandinfo.attention_text = res.data.contact.attention_text;
						this.brandinfo.contact_id = res.data.contact.id;
						this.mainlogo = res.data.logo;
						this.imglist =  res.data.images;
						//动态传值
						this.$refs.uploadimgs.getimgarrs(res.data.images)
						console.log(this.brandinfo); 
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error)
				});
			},

			//关闭常见问题弹窗
			closeproblem() {
				this.commonproblemshow = false;
			},
			gotopro() {
				uni.navigateTo({
					url: '/pages/release/promoter?tmpcontactusindex=1'
				})
			},
			//表单提交
			formSubmit(e) {
				let id =  this.id;
				let forms = e.detail.value;
				if (!forms.title) {
					this.$ShowMsg('请填写品牌标题！')
					return;
				} else if (!forms.introduction) {
					this.$ShowMsg('请填写品牌介绍！')
					return;
				} else if (!forms.details) {
					this.$ShowMsg('请填写品牌详情！')
					return;
				}

				if (!this.brandinfo.contact_id) {
					this.$ShowMsg('请选择发起人！');
					return;
				}
				forms.contact_id = this.brandinfo.contact_id
				forms.images = this.imglist;
				forms.logo = this.mainlogo;
				//console.log(forms);
				this.$HttRequest({
					url: '/brand/add',
					param: forms,
				}, 'POST', true).then((res) => {
					//console.log(res);
					if (res.status === 10000) {
						forms.contact  = uni.getStorageSync('tmpcontactus')?uni.getStorageSync('tmpcontactus'):this.brandinfo.contact
						
						forms.lottery_count= this.brandinfo.lottery_count
						forms.lottery_people= this.brandinfo.lottery_people 
						forms.views= this.brandinfo.views 
						//console.log(forms)
						this.$common.state.brand = forms;
						
						let usershow = uni.getStorageSync('user_info');
							usershow.brand = true;
							uni.setStorageSync('user_info',usershow);
						//移除
						if (uni.getStorageSync('tmpcontactus')) {
							uni.removeStorageSync('tmpcontactus');
						}
						if (this.id) {
							this.$ShowMsg('品牌主页修改成功！');
							uni.navigateBack({
								delta:1
							})
						} else {
							this.$ShowMsg('品牌主页添加成功！');
							// uni.navigateBack({
							// 	delta:2
							// })
							uni.reLaunch({
								url:'/pages/brand/mainbrand?id=' + usershow.id
							})
						}
						
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error)
				});
			},
			drawtipeject(title, msg) {
				this.problemtitle = title;
				this.commonproblem = msg;
				this.commonproblemshow = true;
			},

			//裁剪图片
			tailoring() {
				this.$refs.avatar.fChooseImg(1, {
					selWidth: '400upx',
					selHeight: '400upx',
					inner: false
				});
			},
			//裁剪图片赋值
			doUpload(rsp) {
				//优先复制
				//this.mainlogo = rsp.path;
				//图片上传
				this.$Uploadimg(rsp.path).then(res => {
					let imageres = JSON.parse(res)
					if (imageres.status === 10000) {
						this.mainlogo = imageres.data[0];
					} else {
						console.log(imageres.message);
					}
				}).catch(err => {
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss">
	page {

		background-color: #f0f0f0;
	}

	.save-button {
		margin: 20rpx auto;
		width: 95%;
		height: 90rpx;
		background-color: $uni-color-primary;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		margin-bottom: 40rpx;

	}

	.tipcontents {
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;

		text {
			line-height: 50rpx;
		}

		.openbutton {
			color: #fff;
			font-size: 30rpx;
			margin: 20rpx auto;
			margin-top: 30rpx;
			background-color: $uni-color-primary;
			width: 100%;
			display: flex;
			justify-content: center;
			height: 85rpx;
			border-radius: 20rpx;
			align-items: center;
		}
	}

	.intro {
		display: flex;
		justify-content: center;
		flex-direction: column;
		color: #848484;
		font-size: 28rpx;

		.groupimg {
			background-color: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			padding: 20rpx;

			.image-item {
				margin: 15rpx 8rpx;
				width: 150rpx;
				height: 150rpx;
				background-color: #f2f2f2;
				font-size: 50rpx;
				font-weight: normal;
				color: #ababab;
				justify-content: center;
				display: flex;
				align-items: center;
				position: relative;

				image {
					width: 150rpx;
					height: 150rpx;
				}

				.delete {
					z-index: 99;
					position: absolute;
					width: 35rpx;
					font-size: 25rpx;
					color: #fff;
					height: 35rpx;
					top: -10rpx;
					right: -5rpx;
					background-color: #ea5551;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					font-weight: bold;
				}
			}
		}

		.intros {
			background-color: #fff;
			height: auto;
			flex: 1;
			padding: 30rpx;

			.area {
				width: 100%;
				// height: 300rpx;
			}
		}

		.intro-title {
			margin: 20rpx 0;
			display: flex;
			flex: 1;
			padding-left: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.intro-content {
			background-color: #fff;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex: 1;
			padding-left: 30rpx;
		}
	}

	.contanier {
		margin-top: 20rpx;
		flex: 1;
		padding: 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.content-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		border-bottom: 1rpx solid #e1e1e1;
		padding: 10rpx 0;
		height: 80rpx;

		.faiqi {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 300rpx;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 28rpx;
				height: 28rpx;
				border: 2rpx solid #9e9e9e;
				border-radius: 50%;
				font-size: 25rpx;
				margin-left: 10rpx;
				color: #9e9e9e;
			}
		}

		.headimg {
			display: flex;
			justify-content: center;
			align-items: center;

			.avatarimg {
				box-shadow: 0 10rpx 10rpx #F0F0F0;
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
			}
		}

	}
</style>
